<template>
  <div ref="pageComBox" class="app-container page_wrapper">
    <div ref="otherBox">
      <QueryForm
        v-model="form"
        :channelList="channelList"
        :media-list="mediaList"
        @search="getRationList"
      />
    </div>
    <!-- <RationTable :list="rationList" :channelList="channelList" /> -->
    <el-table
      ref="multipleTable"
      :data="rationList"
      border
      style="width: 100%"
      :max-height="tableHeight"
      :key="tableHeight"
      v-tabscroll="$getTableHeight"
    >
      <el-table-column prop="channelId" label="渠道">
        <template slot-scope="{ row }">
          <span>{{ getChannelName(row.channelId) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="media" label="媒体" />
      <el-table-column prop="city" label="城市" />
      <el-table-column prop="dayCount" label="每天量级" />
      <el-table-column prop="weekCount" label="每周量级" />
      <el-table-column prop="monthCount" label="每月量级" />
      <el-table-column prop="createBy" label="创建人" />
      <el-table-column prop="createDate" label="创建日期" />
      <el-table-column prop="updateBy" label="修改人" />
      <el-table-column prop="updateDate" label="修改日期" />
      <el-table-column label="操作" width="200px" align="center">
        <template slot-scope="{ row }">
          <el-link type="primary" class="el_link" @click="edit(row)"
            >编辑</el-link
          >
          <el-link type="primary" class="el_link" @click="handleInput(row)"
            >录入成本</el-link
          >
          <el-link type="primary" class="el_link" @click="lookDetail(row)"
            >查看成本</el-link
          >
          <!-- <el-button type="primary" plain size="mini" @click="edit(row)">编辑</el-button>
          <el-button type="info" plain size="mini" @click="handleInput(row)">录入成本</el-button>
          <el-button type="default" plain size="mini" @click="lookDetail(row)">查看成本</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <BasePagination
      v-model="page.page"
      :total="totalCount"
      @change="pageOnChange"
    />
    <el-dialog
      title="录入成本"
      width="600px"
      :visible.sync="inputDialog.visible"
      :close-on-click-modal="false"
    >
      <el-form
        ref="form"
        :model="inputDialog"
        :rules="rules"
        label-width="90px"
      >
        <el-form-item label="配量ID:">
          <span>{{ inputDialog.content.rationId }}</span>
        </el-form-item>
        <el-form-item label="渠道:">
          <span>{{ inputDialog.content.channelName }}</span>
        </el-form-item>
        <el-form-item label="媒体:">
          <span>{{ inputDialog.content.media }}</span>
        </el-form-item>
        <el-form-item label="城市:">
          <span>{{ inputDialog.content.city }}</span>
        </el-form-item>
        <el-form-item label="当日价格:" prop="content.price">
          <el-input
            size="small"
            style="width: 100px"
            placeholder="单价"
            v-model="inputDialog.content.price"
          />
          <span>录入成本，用来分析渠道的成本，回收等等，淘汰差的渠道</span>
        </el-form-item>
        <el-form-item label="日期:" prop="content.inputDate">
          <el-date-picker
            v-model="inputDialog.content.inputDate"
            size="small"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <div class="d-flex justify-center">
          <el-button type="primary" @click="addPrice">保存</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- 查看成本弹框 开始 -->
    <glsx-dialog
      :show="showDialog"
      title="查看成本"
      width="70%"
      @close="closeDialog()"
      :appendtobody="true"
    >
      <div>
        <cost-detail :info="current"></cost-detail>
      </div>
    </glsx-dialog>
    <!-- 查看成本弹框 end -->
  </div>
</template>
<script>
import {
  media,
  getAllChannelList,
  getRationList,
  addPrice,
} from "@/api/channel/index";
import QueryForm from "./_components/QueryForm.vue";
import RationTable from "./_components/RationTable.vue";
import EventBus from "@/utils/eventBus";
import CostDetail from "../cost.vue";
import { pick } from "lodash";
export default {
  name: "RationManage",
  components: { QueryForm, RationTable, CostDetail },
  data() {
    return {
      form: {
        channelId: "",
        media: "",
        city: "",
      },
      mediaList: [],
      channelList: [],
      rationList: [],
      totalCount: 0,
      page: {
        page: 1,
        size: 100,
      },
      inputDialog: {
        visible: false,
        content: {
          price: "",
          inputDate: "",
        },
      },
      rules: {
        "content.price": [
          { required: true, message: "请输入价格", trigger: "blur" },
        ],
        "content.inputDate": [
          { required: true, message: "请选择日期", trigger: "change" },
        ],
      },
      showDialog: false,
      current: {},
      tableHeight: 0,
    };
  },
  created() {
    EventBus.$on("add.cost.info", this.handleInput);
    this.getMediaList();
    this.getAllChannelList();
    this.getRationList();
  },
  mounted() {
    // 计算表格的高度
    let _this = this;
    this.$getTableHeight();
    window.onresize = function () {
      _this.$getTableHeight();
    };
  },
  methods: {
    async getMediaList() {
      const res = await media();
      if (!res.result) return;
      this.mediaList = res.data.map((item) => {
        return {
          value: item,
          label: item,
        };
      });
    },
    async getAllChannelList() {
      const res = await getAllChannelList();
      if (!res.result) return;
      this.channelList = res.data.map((item) => {
        return {
          value: item.id,
          label: item.nickname,
        };
      });
    },
    async getRationList() {
      this.showAppLoading();
      const params = {
        paramObject: this.form,
        ...this.page,
      };
      const res = await getRationList(params);
      this.hideAppLoading();
      if (!res.result) return;
      this.rationList = res.data.dataList;
      this.totalCount = res.data.totalCount;
      this.page.page = res.data.page;
    },
    async addPrice() {
      const flag = await this.$refs["form"].validate();
      if (!flag) return;
      const res = await addPrice(this.inputDialog.content);
      if (!res.result) return;
      this.$message.success("录入成本成功");
      this.inputDialog = {
        visible: false,
        content: {
          price: "",
          inputDate: "",
        },
      };
      EventBus.$emit("add.price.success");
      this.getRationList();
    },

    pageOnChange(row) {
      this.page.page = row.page;
      if (row.pageSize) {
        this.page.size = row.pageSize;
      }
      this.getRationList();
    },

    handleInput(row) {
      const { content } = this.inputDialog;
      const pickArr = ["orgId", "channelId", "media", "city"];
      const obj = {
        ...pick(row, pickArr),
        rationId: row.id,
      };
      this.inputDialog = {
        visible: true,
        content: {
          ...content,
          ...obj,
          channelName: this.getChannelName(row.channelId),
        },
      };
    },
    edit(row) {
      const { id, channelId, media, city, dayCount, weekCount, monthCount } =
        row;
      this.$router.push({
        name: "rationCreate",
        params: {
          id,
          channelId,
          media,
          city,
          dayCount,
          weekCount,
          monthCount,
          type: "edit",
        },
      });
      console.log("操作");
    },
    getChannelName(channelId) {
      return this.channelList.find(({ value }) => value === channelId)?.label;
    },

    // 查看详情
    lookDetail(row) {
      this.showDialog = true;
      this.current = row;
    },

    // 关闭弹框
    closeDialog() {
      this.showDialog = false;
      this.current = {};
    },
  },
};
</script>
